<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>后台</title>
    <link href="${pageContext.request.contextPath}/admin/css/glyphicon.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/admin/css/card-styles.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
    <script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-title" id="activityName">${active.name} 【ID:${active.id}】</div>
                    <div class="card-content">
                        <div class="info-section">
                            <div class="info-label">时间范围</div>
                            <div class="info-content-container">
                                <div id="activityBeginTime" class="info-content">开始时间: ${active.beginTime}</div>
                                <div id="activityEndTime" class="info-content">结束时间: ${active.endTime}</div>
                            </div>
                        </div>

                        <div class="info-section">
                            <div class="info-label">活动类型</div>
                            <div class="info-content-container">
                                <div id="activityType" class="info-content">${active.type}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-title">材料信息</div>

                        <a-button class="btn btn-primary" >导出全部材料</a-button><br><br>

                    <table id="datatablesSimple" class="table">
                        <thead>
                        <tr>
                            <th>提交人</th>
                            <th>提交学号</th>
                            <th>提交时间</th>
                            <th>文件状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Dynamically populate rows here -->
                        <c:forEach items="${ClassSubmit}" var="sub">
                            <tr>
                            <td>${sub.getName()}</td>
                            <td>${sub.getUserID()}</td>
                            <td>${sub.getSubmitTime()}</td>
                            <td>
                            <button onclick="showImage('${pageContext.request.contextPath}/images/${sub.getId()}/${sub.getMaterial()}')">查看图片</button>
                            </td>
                            </tr>
                        </c:forEach>

                        </tbody>
                    </table>
                </div>

                <!-- 弹出图片的模态框 -->
                <div id="imageModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; background-color:white; padding:20px; border:1px solid black;">
                    <span onclick="closeImage()" style="cursor:pointer; position:absolute; top:10px; right:10px;">关闭</span>
                    <img id="imageContent" src="" style="max-width:100%;">
                </div>

            </div>
        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/simple-datatables@latest.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/datatables-simple-demo.js"></script>

<script>
	function showImage(imagePath) {
		var modal = document.getElementById('imageModal');
		var image = document.getElementById('imageContent');
		image.src = imagePath;
		modal.style.display = 'block';
	}

	function closeImage() {
		var modal = document.getElementById('imageModal');
		modal.style.display = 'none';
	}


//	zip download






</script>
</body>
</html>
